<template>
  <div>
      <!-- <div 
      :style="{
        top:500+Math.sin(Math.PI/180*-180/8*item)*30+'px',
        left:800+Math.cos(Math.PI/180*-180/8*item)*400+'px',
        transform:'rotate('+item*-1+'deg)',
        zIndex:8-item
        }"
     
      class="card"
      v-for="item in 8" :key="item">{{item}}</div> -->
      <div 
      :style="{
        top:item.top+item.yplus+'px',
        left:item.left+'px',
        zIndex:8-item.zIndex,
        transform:'rotate('+item.rote*-0.7+'deg)',
      }"
      @click="clickHd(item,index)"
      class="card" v-for="(item,index) in list" :key="item.content">
        {{item.content}} <br>
        {{item.yplus}}
      </div>
      <input type="text" v-model="rx">
        <input type="text" v-model="ry">
  </div>
</template>
<script>
export default {
  data(){
    return {list:[],
    count:12,//数量
    rx:0,ry:0}
  },
  methods:{
    clickHd(item,index){
      if(this.list[index].rote==0){
        this.list[index].rote = index;
         this.list[index].yplus = 0;
        // this.list[index].zIndex = index;
      }else{
         this.list[index].yplus = -100;
         this.list[index].rote = 0;
        //  this.list[index].zIndex = -100;
      }
    },
    createList(){
      this.list = [];
    var center = {x:800,y:500}; //中心x，中心y
        var rx = 400; //椭圆x半径
        var ry = 80; //椭圆y半径
        var arc = 180; //显示弧度宽360就会变成圆
        for(let i=0;i<this.count;i++){
          var obj= {
            content:i,  //内容
            top:center.y+Math.sin(Math.PI/180*-arc/this.count*i)*this.ry, //x位置
            left:center.x+Math.cos(Math.PI/180*-arc/this.count*i)*this.rx, //y位置
            rote:i, //选做角度
            yplus:0,//增加的y位置
            zIndex:i,
          }
          
          this.list.push(obj);
        }
    }
  },
  created(){
    this.createList();
    // 创建动画
    for(let i = 0;i<100;i++){
      this.rx = 80/100*i;
      this.ry = 80/100*i;
      setTimeout(()=>{
         this.createList();
      },i*10)
    }
  }
}
</script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .card{
    width: 200px;
    height: 400px;
    position: absolute;
    border:1px solid red;
    transition: all ease 1s;
    background-color: #fff;
  }
</style>